<template>
  <div class="cost-summary">
    <ProTable
      ref="qr_order"
      :immediate="true"
      :request="queryQrOrderList"
      :search-form="formList"
      :columns="columns"
      :pagination="true"
      :before-search-submit="beforeSearchSubmit"
    >
    </ProTable>
  </div>
</template>

<script>
import ProTable from '@/components/ProTable';
import {omit} from 'lodash';

import { queryQrOrderList } from '@/api/order';

import { getDateRangeDate } from '@/utils/date'
import util from '@/utils/util'
import Authc from "@/components/Authc";

export default {
  name: 'QrOrder',
  components: {
    ProTable,
    Authc
  },
  data() {
    return {
      formList: [
        {
          type: 'input',
          name: 'orderId',
          label: '订单号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'flowId',
          label: '支付流水',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'accFlowId',
          label: '银行卡id',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'uid',
          label: '用户id',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'mobile',
          label: '手机号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },

        {
          type: 'select',
          name: 'orderStatus',
          label: '订单状态',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [{value: 'WP',label: '待支付'}, {value: 'HC',label: '已取消'}, {value: 'ER',label: '支付失败'}, {value: 'AP',label: '已支付'}],
            clearable:false
          }
        },

        {
          type: 'range',
          name: 'date',
          label: '创建时间',
          value: '',
          props: {
            placeholder: '请选择',
            format: 'yyyy年MM月dd日'
          }
        },
      ],
      columns: [
        {
          title: '二维码单号',
          width: 185,
          key: 'orderId'
        },
        {
          title: '支付流水号',
          width: 175,
          key: 'flowId',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  on: {
                    click: () => this.gotoQrFlowDetail(params.row)
                  }
                },
                params.row.flowId
              )
            ]);
          }
        },

        {
          title: '用户id',
          width: 195,
          key: 'uid'
        },
        {
          title: '手机号',
          width: 115,
          key: 'mobile'
        },

        {
          title: '订单金额',
          width: 100,
          key: 'orderAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.orderAmount));
          }
        },
        {
          title: '支付金额',
          width: 100,
          key: 'payAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.payAmount));
          }
        },
        {
          title: '优惠金额',
          width: 100,
          key: 'discount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.discount));
          }
        },
        {
          title: '退款金额',
          width: 100,
          key: 'refundAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.refundAmount));
          }
        },
        {
          title: '订单状态',
          key: 'orderStatus',
          width: 150,
          render: (h, params) => {
            if (params.row.orderStatus === 'WP' ) {
              return h('Tag', {props: {color: 'default'}}, params.row.orderStatusName)
            }
            if (params.row.orderStatus === 'AP') {
              return h('Tag', {props: {color: 'success'}}, params.row.orderStatusName)
            }
            return h('Tag', {props: {color: 'warning'}}, params.row.orderStatusName)
          }
        },
        {
          title: '异常交易',
          width: 150,
          key: 'errorTradeName',
          render: (h, params) => {
            if (params.row.errorTrade === '0'||params.row.errorTrade === 0 ) {
              return h('Tag', {props: {color: 'success'}}, params.row.errorTradeName)
            }
            return h('Tag', {props: {color: 'error'}}, params.row.errorTradeName)
          }
        },
        {
          title: '商户名称',
          width: 150,
          key: 'merchantName'
        },

        {
          title: '过期时间',
          width: 150,
          key: 'payExpiryTime'
        },
        {
          title: '支付时间',
          width: 150,
          key: 'payTime'
        },
        {
          title: '创建时间',
          width: 150,
          key: 'createDt'
        },
        {
          title: '操作',
          width: 100,
          fixed:"right",
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  on: {
                    click: () => this.gotoDetail(params.row)
                  }
                },
                '明细'
              )
            ]);
          }
        }

      ]
    };
  },
  computed: {

  },
  methods: {
    queryQrOrderList,
    exportExcelAll () {

    },
    // 跳转到商户页面
    gotoQrFlowDetail (row) {
      this.$router.push({
        path: '/pay/admin/payCenter/qrFlowDetail', query: { flowId: row.flowId }
      });
    },
    gotoDetail(row) {
      this.$router.push({
        path: '/qr/qrOrderDetail', query: { orderId: row.orderId }
      });
    },
    beforeSearchSubmit(data) {
      const { date } = data
      const [startDate, endDate] = getDateRangeDate(date)
      console.log(startDate, endDate)
      if(startDate){
        data.createdDtBegin = util.formatDate(startDate)
      }
      if(endDate){
        data.createdDtEnd = util.formatDate(endDate)
      }
      return omit(data, 'date')
    },
  }
};
</script>
